<template>
  <view class="add-to-cart">
	  <view class="goods-nav">
	  	<view class="cart" @click="handleCart">
			<image src="/static/icons/shop-b.png" mode="" class="img"></image>
	  		<text class="text">购物车</text>
	  	</view>
		<view class="to-pay" @click="handleToPay">
			去结算
		</view>
	  </view>
<view class="bottom-save-area" :style="{height:`${bottomSafeArea()}px`}"></view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { bottomSafeArea } from '../../utils/system';

// 跳转到购物车
const handleCart = ()=>{
	uni.switchTab({
		url:'/pages/shoppingCar/shoppingCar'
	})
}

// 去结算
const handleToPay = ()=>{
	uni.navigateTo({
		url:'/pages/orderSubmit/orderSubmit'
	})
}

</script>
<style scoped lang="scss">
	.add-to-cart{
		position: sticky;
		background-color: #fff;
		bottom:0;
		z-index: 1;
		
		.goods-nav{
			height: 120rpx;
			background-color: #fff;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			padding: 0 30rpx ;
			box-sizing: border-box;
			
			.cart{
				margin-left: 50rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				.img{
					width: 50rpx;
					height: 50rpx;
				}
				.text{
					font-size: 30rpx;
				}
			}
			.to-pay{
				// width: ;
				border-radius: 100rpx;
				height: 100rpx;
				width: 400rpx;
				background-color: blanchedalmond;
				text-align: center;
				line-height: 100rpx;
				
				
			}
			
		}
	}
</style>
<style></style>